<template>
	<view :style="objColor">
		<!-- homeSub/pages/priceDetail/priceDetail.wxml -->
		<view class="top-nav">
			<view class="head-nav">
				<view :class="'nav ' + (navIndex == item.index ? 'activite' : '')" @tap="checkIndex" :data-index="item.index"
					v-for="(item, index) in tabMenu" :key="index">
					{{ item.name }}
					<image v-if="navIndex == item.index" class="img2"
						src="https://oos-cn.ctyunapi.cn/front-end/static/static/title_bg2.png"></image>
				</view>
			</view>

			<view class="chargingType">
				<view v-for="(item,index) in chargingTypeList" class="item">
					<view :class="item.type" class="num">{{item.num}}</view>
					<view>{{item.name}}</view>
				</view>
			</view>
		</view>

		<!-- 列表 -->
		<block>
			<!-- 枪列表 -->
			<view v-if="priceDetail[tabType[navIndex]]" class="pageList">
				<block v-if="priceDetail[tabType[navIndex]].gunList.length > 0">
					<view class="plie_list" v-for="(item, index) in priceDetail[tabType[navIndex]].gunList" :key="index">
						<view class="plie_item" @tap="startCharg" :data-item="item">
							<block v-if="item.gunState == 1">
								<view class="img"></view>
								<view class="img2">空闲</view>
							</block>
							<block v-if="item.gunState == 2">
								<view class="img"></view>
								<view class="img2">充电准备</view>
							</block>
							<block v-if="item.gunState == 4">
								<view class="status"></view>
								<view class="img6">充电<br>完成</view>
							</block>
							<block v-if="item.gunState == 3">
								<!--<Gauge :value="item.currentSOC" ></Gauge>-->
								<!--<u-circle-progress active-color="#6DB12E"  :percent="item.currentSOC" :width="130" :borderWidth="12">-->
								<!--<view class="u-progress-content">-->
								<!--<view class="soc">{{ item.currentSOC }}%</view>-->
								<!--<view class='status5'>{{'充电中'}}</view>-->
								<!--</view>-->
								<!--</u-circle-progress>-->
								<l-echart ref="constituteCanvas3" style="width: 120rpx;height: 120rpx;"></l-echart>
							</block>
							<block v-if="item.gunState == 5">
								<view class="status"></view>
								<view class="img5">离线</view>
							</block>
							<block v-if="item.gunState == 6">
								<view class="status"></view>
								<view class="status3">充电锁定</view>
							</block>
							<block v-if="item.gunState == 7">
								<view class="status"></view>
								<view class="img3">故障</view>
							</block>
							<block v-if="item.gunState == 8">
								<view class="img"></view>
								<view class="img4">预约</view>
							</block>
							<block v-if="item.gunState == 9">
								<view class="status"></view>
								<view class="status3">禁用</view>
							</block>
							<block v-if="item.gunState == 255">
								<view class="status"></view>
								<view class="status3">默认</view>
							</block>
							<view class="item">
								<view class="item_name">
									<text>{{ item.gunName || '未命名' }}</text>
									<image class="item_img" src="https://oos-cn.ctyunapi.cn/front-end/static/static/slow.png"
										v-if="item.gunType === 2"></image>
									<image class="item_img" src="https://oos-cn.ctyunapi.cn/front-end/static/static/fast.png"
										v-if="item.gunType === 1"></image>
									<image class="item_img" src="https://oos-cn.ctyunapi.cn/front-end/static/static/exceed.png"
										v-if="item.gunType === 3"></image>
									<text class="item_type" v-if="item.currentMode === 1">直流</text>
									<text class="item_type2" v-if="item.currentMode === 2">交流</text>
								</view>
								<!-- <view class="item_info">
                                    ￥<text class="price">{{ item.discount||item.contractDiscount?item.currentPriceStr:item.sweepPriceStr }}</text>起
                                    <text style="color: #909399;text-decoration: line-through;margin-left: 10rpx;" v-if="item.discount||item.contractDiscount">￥{{ item.sweepPriceStr }}起</text>
                                    <text style="color: #606266;margin-left: 10rpx">| 功率{{ item.maxPower }}KW</text>
                                </view>
                                <view class="nextInfo">
                                    电费{{ item.currentPowerPriceStr ? item.currentPowerPriceStr : '--' }} 元/度 | 服务费{{ item.currentServicePriceStr ? item.currentServicePriceStr : '--' }}元/度
                                </view> -->


								<!-- 831改动 功率样式 -->
								<view class="max_power">
									<text>最大功率：{{ item.maxPower }}kw</text>
								</view>
								<!-- 831价格展示 -->
								<view class="price_view">
									<!-- 先判断 是否有专享价 -->
									<view class="total_view yyy" v-if="item.exclusiveDiscount">
										<!-- 只有专享价 -->
										<view class="zxj_view zxj" v-if="item.exclusiveDiscount">
											<!-- <view class="current_view">
												<text class="v_text_current">
													¥<text class="current_t">{{ item.sweepPriceStr }}</text>
												</text>
											</view> -->
											<view class="img_view_831_bg">
												<image class="v_icon"
													src="https://oos-cn.ctyunapi.cn/front-end/static/mobileImg/bgTag/zxj_bg.png"
													mode="scaleToFill" />
												<view class="v_text">
													<text>
														¥{{ item.exclusivePriceStr }}
													</text>
												</view>
											</view>
										</view>
									</view>

									<view class="total_view www" v-else>

										<view class="zxj_view zdyh_dkh">
											<view class="current_view">
												<text class="v_text_current">
													¥<text
														class="current_t">{{ item.discount ? item.currentPriceStr : item.sweepPriceStr}}</text>起
												</text>
											</view>
											<!-- 划线价展示：站点优惠 || 成长会员折扣 || 大客户价 -->
											<!-- 23.11.22 付费会员不显示划线价 -->
											<view class="hxj_view"
												v-if="item.discount || item.growthleDiscount  || item.contractDiscount">
												<text class="v_text">
													¥{{ item.sweepPriceStr }}
												</text>
											</view>
											<!-- 大客户价展示条件 -->
											<view class="img_view_831_bg" v-if="item.contractDiscount">
												<image class="v_icon"
													src="https://oos-cn.ctyunapi.cn/front-end/static/mobileImg/bgTag/dkh_bg.png"
													mode="scaleToFill" />
												<view class="v_text">
													<text>
														¥{{ item.contractPriceStr }}
													</text>
												</view>
											</view>
											<!-- 成长会员价展示 -->
											<view class="img_view_831_bg" v-if="item.growthleDiscount">
												<image class="v_icon"
													src="https://oos-cn.ctyunapi.cn/front-end/static/mobileImg/bgTag/icon-huiyuan.png"
													mode="scaleToFill" />
												<view class="v_text">
													<text>
														¥{{ item.growthlePriceStr }}
													</text>
												</view>
											</view>
											<!-- 付费会员价展示 -->
											<view class="img_view_831_bg" v-if="item.payleDiscount">
												<image class="v_icon"
													src="https://oos-cn.ctyunapi.cn/front-end/static/mobileImg/bgTag/icon-vip.png"
													mode="scaleToFill" />
												<view class="v_text">
													<text>
														¥{{ item.paylePriceStr }}
													</text>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</block>
				<view v-else-if="!loading">
					<Upgrading text="暂无价格详情"></Upgrading>
				</view>
			</view>
		</block>

	</view>
</template>

<script>
	'use strict';
	import Upgrading from '../../../components/upgrading/upgrading';
	// import Gauge from "../../../components/jerry-gauge/index.vue";
	// exports.__esModule = true; // homeSub/pages/priceDetail/priceDetail.ts
	var app = getApp();
	var https_1 = require('./../../../api/https.js');
	import * as echarts from 'echartsPages/static/js/echarts.js'
	import lEchart from '../../components/lime-echart/components/l-echart/l-echart'

	export default {
		components: {
			Upgrading,
			lEchart
		},
		data() {
			return {
				current: 0,
				navIndex: 0,
				stationId: 0,
				gunNo: 0,
				pileNo: 0,
				loading: true,
				tabMenu: [],
				tabType: ['allItem', 'superItem', 'fastItem', 'slowItem'],
				chargingTypeList: [{
						name: '总枪数',
						num: 24,
						type: 'all'
					},
					{
						name: '空闲',
						num: 2,
						type: 'free'
					},
					{
						name: '充电中',
						num: 5,
						type: 'charging'
					},
					{
						name: '即将充满',
						num: 4,
						type: 'full'
					},
				],
				priceDetail: {
					superItem: {
						gunList: []
					},
					fastItem: {
						gunList: []
					},
					slowItem: {
						gunList: []
					},
					allItem: {
						gunList: []
					},
				},

				priceInfoList: [],
				platformNo:'',
				isDisCharge: false, // 是否是放电-#V2G功能
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			if (options.stationId) {
				this.stationId = options.stationId
				this.platformNo=options.platformNo || ''
				// #V2G功能
				if (this.isV2GOption) {
					this.isDisCharge = options.disCharge && options.disCharge == 'true' ? true : false
				}
			}
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			// this.getStationGunPriceDetail(this.stationId);
			this.getStationGunState(this.stationId, 0);
			this.getStationGunList(this.stationId, 0)
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			initEchart() {
				this.$nextTick(() => {
					let arr = this.priceDetail[this.tabType[this.navIndex]].gunList.filter(item => item.gunState == 3)
					arr.forEach((item, index) => {
						let option = {
							title: {
								text: item.currentSOC + '%\n充电中',
								left: 'center',
								top: '25%',
								textStyle: {
									color: this.objColor2.textColor,
									fontSize: 12,
									fontWeight: '400'
								}
								// bottom:'0'
							},
							series: [{
								//第一张圆环
								type: 'pie',
								radius: ['80%', '100%'],
								center: ['50%', '50%'],
								// 隐藏指示线
								labelLine: {
									show: false
								},
								//隐藏圆环上文字
								label: {
									show: false
								},
								data: [
									//value当前进度 + 颜色
									{
										value: item.currentSOC,
										itemStyle: {
											normal: {
												color: '#6DB12E'
											}
										}
									},
									{
										value: 100 - item.currentSOC,
										itemStyle: {
											normal: {
												color: '#ececec'
											}
										}
									}
								]
							}]
						};
						this.$refs.constituteCanvas3[index].init(echarts, chart => {
							chart.setOption(option);
						});

						// this.$nextTick(() => {   
						// 	this.$refs.constituteCanvas3[index].init(echarts, constituteCanvas3 => {
						// 		console.log(constituteCanvas3, 'constituteCanvas3..........')   
						// 		constituteCanvas3.setOption(option);
						// 	});
						// })
					})
				})
			},
			//tab栏
			checkIndex: function(e) {
				var index = e.currentTarget.dataset.index;
				var data = this.priceDetail;
				this.navIndex = index
				this.current = 0
				let idx = index;
				if (index === 1) {
					idx = 3
				}
				if (index === 3) {
					idx = 1
				}

				this.getStationGunState(this.stationId, idx);
				this.getStationGunList(this.stationId, idx, true)

				// if (index == 0) {
				// 	this.gunNo=data.allItem.gunList[0].gunNo
				// 	this.pileNo=data.allItem.gunList[0].pileNo
				// }
				//
				// if (index == 1 && data.superItem) {
				// 	this.gunNo=data.superItem.gunList[0].gunNo
				// 	this.pileNo=data.superItem.gunList[0].pileNo
				// }
				//
				// if (index == 2 && data.fastItem) {
				// 	this.gunNo=data.fastItem.gunList[0].gunNo
				// 	this.pileNo=data.fastItem.gunList[0].pileNo
				// }
				//
				// if (index == 3 && data.slowItem) {
				// 	this.gunNo=data.slowItem.gunList[0].gunNo
				// 	this.pileNo=data.slowItem.gunList[0].pileNo
				// }
			},

			switchMenu: function(e) {
				var index = e.currentTarget.dataset.current;
				var gunNo = e.currentTarget.dataset.gunno;
				var pileNo = e.currentTarget.dataset.pileno;
				this.current = index || 0
				this.gunNo = gunNo
				this.pileNo = pileNo
			},

			/**
			 * 开始充电
			 */
			startCharg: function(e) {
				console.log(this.stationId, 'stationId')
				uni.navigateTo({
					url: '../pileDetail/pileDetail?gunId=' + e.currentTarget.dataset.item.gunId + '&stationId=' + this
						.stationId + "&platformNo=" + this.platformNo
				});
			},
			getStationGunState(stationId, dataType) {
				const params = {
					stationId,
					dataType
				}

				// #V2G功能
				if (this.isV2GOption && this.isDisCharge) {
					params.disCharge = true
				}

				https_1.getStationGunState(params).then((res) => {
					if (res.code == 0) {
						let temp = res.data;
						this.chargingTypeList.map(item => {
							switch (item.type) {
								case 'all':
									item.num = temp.sum || 0
									break;
								case 'free':
									item.num = temp.free || 0
									break;
								case 'charging':
									item.num = temp.charging || 0
									break;
								case 'full':
									item.num = temp.aboutFinish || 0
									break;
							}
						})
					}
				})
			},
			getStationGunList(stationId, dataType, type) {
				uni.showLoading({
					title: '加载中...',
					mask: true
				});

				this.priceDetail.fastItem.gunList = []
				this.priceDetail.slowItem.gunList = []
				this.priceDetail.superItem.gunList = []
				this.loading = true

				const params = {
					stationId,
					dataType
				}

				// #V2G功能 放电
				if (this.isV2GOption && this.isDisCharge) {
					params.disCharge = true
				}

				https_1.getStationGunList(params).then((res) => {
					this.loading = false
					if (res.code == 0) {
						let temp = res.data;
						temp.forEach(item => {
							switch (item.gunType) {
								case 1:
									this.priceDetail.fastItem.gunList.push(item)
									break;
								case 2:
									this.priceDetail.slowItem.gunList.push(item)
									break;
								case 3:
									this.priceDetail.superItem.gunList.push(item)
									break;
							}
						})
						this.priceDetail.allItem.gunList = temp || []
						console.log(this.priceDetail)

						setTimeout(() => {
							this.initEchart();
						}, 500)
						if (!type) {
							this.tabMenu = [{
								name: '全部',
								index: 0
							}, {
								name: '超充',
								index: 1
							}, {
								name: '快充',
								index: 2
							}, {
								name: '慢充',
								index: 3
							}]
							if (!this.priceDetail.fastItem.gunList.length) {
								this.tabMenu.splice(2, 1)
							}
							if (!this.priceDetail.slowItem.gunList.length) {
								this.tabMenu.splice(3, 1)
							}
							if (!this.priceDetail.superItem.gunList.length) {
								this.tabMenu.splice(1, 1)
							}
						}

						//页面加载最慢的请求结束后再显示
						this.pageApiObj = true


					}

					uni.hideLoading()
				})
			},

			//获取站点详情(查询枪最低价格信息)
			getStationGunPriceDetail: function(stationId) {
				var that = this;
				https_1.getStationGunPriceDetail(stationId).then((res) => {
					if (res.code == 0) {
						var data = res.data;
						if (data.fastItem) {
							data.fastItem.gunList.map((item) => {
								if (item.priceInfoList) {
									item.priceInfoList.map((item2) => {
										if (String(item2.currentPrice).split(".").length > 1 && String(item2.currentPrice)
											.split(".")[1].length >= 4) {
											item2.currentPrice = Number(item2.currentPrice).toFixed(4)
										}
										return item2
									})
								}
								return item
							})
						}
						if (data.superItem) {
							data.superItem.gunList.map((item) => {
								if (item.priceInfoList) {
									item.priceInfoList.map((item2) => {
										if (String(item2.currentPrice).split(".").length > 1 && String(item2.currentPrice)
											.split(".")[1].length >= 4) {
											item2.currentPrice = Number(item2.currentPrice).toFixed(4)
										}
										return item2
									})
								}
								return item
							})
						}
						if (data.slowItem) {
							data.slowItem.gunList.map((item) => {
								if (item.priceInfoList) {
									item.priceInfoList.map((item2) => {
										if (String(item2.currentPrice).split(".").length > 1 && String(item2.currentPrice)
											.split(".")[1].length >= 4) {
											item2.currentPrice = Number(item2.currentPrice).toFixed(4)
										}
										return item2
									})
								}
								return item
							})
						}
						that.priceDetail = Object.assign(that.priceDetail, data)
						that.gunNo = data.superItem ? data.superItem.gunList[0].gunNo : 0
						that.pileNo = data.superItem ? data.superItem.gunList[0].pileNo : 0
					}
				});
			}
		}
	};
</script>
<style lang="less">
	@import url('./priceDetail.less');

	// 831样式
	@import url('./priceDetail-discount.less');

	.u-progress-content {

		.soc,
		.status5 {
			font-size: 20rpx;
			text-align: center;
			color: var(--textColor);
		}
	}




	/*站点优惠价格样式*/
	.yhimg_box {
		width: 40rpx;
		height: 40rpx;
		margin-right: 8rpx;
		position: relative;

		.discount_img {
			width: 40rpx;
			height: 40rpx;
			position: absolute;
		}

		.vip_text {
			position: absolute;
			top: 40%;
			left: 55%;
			transform: translate(-50%, -50%);
			font-size: 16rpx;
			font-family: DIN-BlackItalic;
			font-weight: 600;
			// font-style:italic;
			color: #A65424;
		}
	}
</style>